import  { useState, useEffect } from "react";
import {
  Table,
  InputNumber,
  Select,
  Button,
  Popconfirm,
  Image,
  Input,
  DatePicker,
  Pagination,
} from "antd";
import {
  EditTwoTone,
  DeleteTwoTone,
  SaveTwoTone,
  SearchOutlined,
} from "@ant-design/icons";
import {
  fetchDrugsList,
  fetchDrugsDelete,
  fetchDrugsSearch,
  fetchDrugsEdit,
  fetchAllDel,  
} from "../../api/hytApi";
const { Option } = Select;
import { format } from "date-fns";
import dayjs from "dayjs";

const MedicalItemsManagement = () => {
  const [dataSource, setDataSource] = useState([]); // 初始化数据源
  const [nameFilter, setNameFilter] = useState(""); // 名字过滤
  const [addressFilter, setAddressFilter] = useState(""); // 地址过滤
  const [current, setCurrent] = useState(1); // 当前页
  const [pageSize, setPageSize] = useState(10); // 每页显示的条数
  const [editingItem, setEditingItem] = useState(null); // 存储正在编辑的行数据
  const [delItem, setdelItem] = useState([]); // 删除的id数据

  // .获取初始数据请求
  const fetchDrugsListFn = async () => {
    const res = await fetchDrugsList({
      page: 1,
      size: 100,
    });
    console.log(res);
    if (res.code === 1) {
      // 在每个元素上添加 editing: false 字段
      const updatedData = res.data.map((item) => ({
        ...item,
        editing: false, // 为每个元素添加 editing 字段
        key: item.id,
        starttime: format(new Date(item.starttime), "yyyy-MM-dd"), // 格式化日期
        endtime: format(new Date(item.endtime), "yyyy-MM-dd"), // 格式化日期
      }));

      // 设置更新后的数据
      setDataSource(updatedData);
    }
  };

  // .页面初始请求
  useEffect(() => {
    fetchDrugsListFn();
  }, []);

  // .查询按钮点击事件
  const handleSearch = async () => {
    try {
      const res = await fetchDrugsSearch({
        page: 1,
        size: 100,
        name: nameFilter, // 从输入框取值
        sort: addressFilter, // 从输入框取值
      });

      // 检查 res.data 的长度
      if (res.data && res.data.length > 0) {
        console.log(res); // 输出返回的数据，或者在此处处理数据

        const updatedData = res.data.map((item) => ({
          ...item,
          editing: false, // 为每个元素添加 editing 字段
          key: item.id,
          starttime: format(new Date(item.starttime), "yyyy-MM-dd"), // 格式化日期
          endtime: format(new Date(item.endtime), "yyyy-MM-dd"), // 格式化日期
        }));

        // 设置更新后的数据
        setDataSource(updatedData);
      } else {
        console.log("====================================");
        console.log("没有找到匹配的数据");
        console.log("====================================");
      }
    } catch (error) {
      console.error("Error fetching drugs:", error);
    }
  };

  // .处理输入框的变化
  const handleNameChange = (e) => {
    setNameFilter(e.target.value);
  };

  const handleAddressChange = (e) => {
    setAddressFilter(e.target.value);
  };

  const handleChangePage = (page, pageSize) => {
    setCurrent(page);
    setPageSize(pageSize);
    // 在这里可以处理数据的更新，通常你会做 API 请求获取当前页的数据
  };

  // .处理删除
  const handleDelete = async (key) => {
    const res = await fetchDrugsDelete(key);
    if (res.code === 1) {
      fetchDrugsListFn();
    }
  };

  //.复选框事件
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // selectedRowKeys 是勾选的行的 key
      // selectedRows 是勾选的行的完整数据
      console.log("Selected Row Keys: ", selectedRows);
      // 获取 selectedRows 中每一项的 id
      const selectedIds = selectedRows.map((row) => row.id); // 假设每一行有 id 字段
      setdelItem(selectedIds);
      // 使用展开运算符将 selectedIds 合并到 delItem 中
    },
  };

  // ?处理批量删除
  const handleAllDel = async () => {
    const str = JSON.stringify(delItem);
    console.log("🚀 ~ handleAllDel ~ str:", str);
    const res = await fetchAllDel({
      ids: str,
    });

    if (res.code === 1) {
      fetchDrugsListFn();
    }
  };

  // .处理编辑
  const handleEdit = (key) => {
    // 找到当前行的数据
    const item = dataSource.find((item) => item.key === key);
    if (item) {
      // 设置正在编辑的行数据
      setEditingItem(item);
      // 更新dataSource状态，设置当前行为编辑状态
      const newDataSource = dataSource.map((item) => {
        if (item.key === key) {
          return { ...item, editing: true };
        }
        return item;
      });
      setDataSource(newDataSource);
    }
  };
  // .处理保存
  const handleSave = (key) => {
    // 遍历数据源，收集正在编辑的项的数据
    const updatedItems = dataSource.map(async (item) => {
      if (item.key === key && item.editing) {
        // 收集编辑的数据
        const updatedItem = {
          id: item.id,
          name: item.drugsname,
          sort: item.sort,
          type: item.type,
          img: item.img,
          count: item.count,
          price: item.price,
          //判断dayjs格式
          starttime: dayjs.isDayjs(item.starttime)
            ? item.starttime.format("YYYY-MM-DD")
            : item.starttime,
          endtime: dayjs.isDayjs(item.endtime)
            ? item.endtime.format("YYYY-MM-DD")
            : item.endtime,
        };

        const res = await fetchDrugsEdit(updatedItem);
        if (res.code === 1) {
          fetchDrugsListFn();
        }
      }
    });
  };

  // ?通用更新函数
  const updateItem = (key, value) => {
    // 更新当前编辑行的item
    const updatedEditingItem = { ...editingItem, [key]: value };
    setEditingItem(updatedEditingItem);

    // 更新数据源中的该行
    const updatedDataSource = dataSource.map((item) => {
      if (item.key === editingItem.key) {
        return { ...item, [key]: value };
      }
      return item;
    });

    setDataSource(updatedDataSource); // 更新数据源
  };

  // .医品名称
  const handleNamesChange = (e) => {
    updateItem("drugsname", e.target.value);
  };

  // .医品规格
  const handleTypeChange = (e) => {
    updateItem("type", e.target.value);
  };

  // .库存数量
  const handleCountChange = (value) => {
    updateItem("count", value);
  };

  // .医品价格
  const handlePriceChange = (value) => {
    updateItem("price", value);
  };

  // .医品分类
  const handleSortChange = (value) => {
    updateItem("sort", value);
  };

  // .结束时间
  const handleDateChange = (dateString) => {
    updateItem("endtime", dateString);
  };

  // .开始时间
  const handleProDateChange = (dateString) => {
    updateItem("starttime", dateString);
  };

  // .列定义
  const columns = [
    {
      title: "医品名称",
      dataIndex: "drugsname",
      key: "id",
      render: (text, record) =>
        record.editing ? (
          <Input
            value={
              editingItem?.key === record.key ? editingItem.drugsname : text
            } // 绑定当前编辑行的值
            onChange={handleNamesChange} // 输入框值变化时更新
            style={{ width: "100%" }}
          />
        ) : (
          text
        ),
    },
    {
      title: "医品分类",
      dataIndex: "sort",
      key: "id",
      render: (text, record) =>
        record.editing ? (
          <Select
            value={editingItem?.key === record.key ? editingItem.sort : text} // 确保使用最新的editingItem
            onChange={handleSortChange} // 分类变化时更新
            style={{ width: "120px" }}
          >
            <Option value="药品">药品</Option>
            <Option value="器械">器械</Option>
            <Option value="其他">其他</Option>
          </Select>
        ) : (
          text
        ),
    },
    {
      title: "医品图片",
      dataIndex: "img",
      key: "id",
      render: (image) => <Image width={48} src={image} />,
    },
    {
      title: "医品规格",
      dataIndex: "type",
      key: "id",
      render: (text, record) =>
        record.editing ? (
          <Input
            value={editingItem?.key === record.key ? editingItem.type : text} // 绑定当前编辑行的值
            onChange={handleTypeChange}
            style={{ width: "100%" }}
          />
        ) : (
          text
        ),
    },
    {
      title: "库存数量",
      dataIndex: "count",
      key: "id",
      render: (text, record) =>
        record.editing ? (
          <InputNumber
            min={1}
            max={100}
            value={
              editingItem?.key === record.key ? editingItem.count : Number(text)
            } // 确保使用最新的editingItem
            onChange={handleCountChange} // 库存数量变化时更新
          />
        ) : (
          text
        ),
    },
    {
      title: "医品价格",
      dataIndex: "price",
      key: "id",
      render: (text, record) =>
        record.editing ? (
          <InputNumber
            min={0}
            step={0.01}
            value={
              editingItem?.key === record.key ? editingItem.price : Number(text)
            } // 确保使用最新的editingItem
            onChange={handlePriceChange} // 医品价格变化时更新
            prefix="¥" // 显示人民币符号
          />
        ) : (
          `¥${text}`
        ),
    },
    // DatePicker
    {
      title: "生产日期",
      dataIndex: "starttime",
      key: "starttime",
      render: (text, record) =>
        record.editing ? (
          <DatePicker
            value={dayjs(text)}
            onChange={(dateString) => handleProDateChange(dateString)}
          />
        ) : (
          text
        ),
    },
    {
      title: "有效日期",
      dataIndex: "endtime",
      key: "id",
      render: (text, record) =>
        record.editing ? (
          <DatePicker
            value={dayjs(text)}
            onChange={(dateString) => handleDateChange(dateString)}
          />
        ) : (
          `${text}`
        ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <div>
          {record.editing ? (
            <Button
              type="link"
              icon={<SaveTwoTone />}
              onClick={() => handleSave(record.key)} // 保存编辑
            ></Button>
          ) : (
            <>
              <Popconfirm
                title="确定要删除吗？"
                onConfirm={() => handleDelete(record.key)} // 删除药品
              >
                <Button type="link" danger icon={<DeleteTwoTone />} />
              </Popconfirm>
              <Button
                type="link"
                icon={<EditTwoTone />}
                onClick={() => handleEdit(record.key)} // 点击编辑按钮时调用 handleEdit
              />
            </>
          )}
        </div>
      ),
    },
  ];

  return (
    <div>
      {/* 输入框和查询按钮 */}
      <div
        style={{ marginBottom: "15px", display: "flex", alignItems: "center" }}
      >
        <span style={{ marginRight: "10px", marginLeft: "10px" }}>
          医品名称
        </span>
        <Input
          placeholder="请输入医疗品/耗材/药品名称"
          style={{ width: 250, marginRight: 10 }}
          value={nameFilter}
          onChange={handleNameChange} // 绑定输入框的变化
        />
        <span style={{ marginRight: "10px" }}>医品分类</span>

        <Input
          placeholder="请输入医疗品/耗材/药品分类"
          style={{ width: 250, marginRight: 10 }}
          value={addressFilter}
          onChange={handleAddressChange} // 绑定输入框的变化
        />
        <Button
          style={{ marginRight: "auto" }}
          type="primary"
          onClick={handleSearch}
          icon={<SearchOutlined />}
        >
          查询
        </Button>

        <Button onClick={handleAllDel}>删除选中</Button>
      </div>
      {/* 表格 */}
      <Table
        style={{ marginBottom: "10px" }}
        rowSelection={rowSelection} // 配置复选框
        rowKey="id" // 设置行 key
        columns={columns}
        dataSource={dataSource.slice(
          (current - 1) * pageSize,
          current * pageSize
        )} // 分页数据
        pagination={false} // 禁用默认分页器
      />
      {/* 自定义分页器放置在左侧 */}
      <div style={{ marginBottom: "16px", textAlign: "left" }}>
        <Pagination
          style={{ marginLeft: "10px" }}
          current={current}
          pageSize={pageSize}
          total={dataSource.length} // 数据的总数
          onChange={handleChangePage}
          showSizeChanger
          pageSizeOptions={["5", "10", "20", "50"]}
          showTotal={(total) => `共 ${total} 条数据`}
        />
      </div>
    </div>
  );
};

export default MedicalItemsManagement;